<template>
  <div>
    <!--<el-dialog-->
    <!--  title="提示"-->
    <!--  :visible.sync="centerDialogVisible"-->
    <!--  width="30%"-->
    <!--  center>-->
    <!--  <div>-->
    <!--    <div class="head">-->
    <!--      <h2>高 <span>美乐堂商城</span></h2>-->
    <!--      <span>创建于2019-12-02 11：00</span>-->
    <!--      <span class="status">销售中</span>-->
    <!--    </div>-->
    <!--    <el-input-->
    <!--      type="textarea"-->
    <!--      :autosize="{ minRows: 2, maxRows: 10}"-->
    <!--      placeholder="请输入内容"-->
    <!--      v-model="value">-->
    <!--    </el-input>-->
    <!--  </div>-->
    <!--  <div class="btns">-->
    <!--    <el-button @click="centerDialogVisible = false">取 消</el-button>-->
    <!--    <el-button type="primary" @click="AddProjectList">确 定</el-button>-->
    <!--  </div>-->
    <!--  <div class="todo">-->
    <!--    <TodoList-->
    <!--      @currentChange="currentChange"-->
    <!--      @changeProject="changeProject"-->
    <!--    />-->
    <!--  </div>-->
    <!--</el-dialog>-->

    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="centerDialogVisible"
      width="800px"
      center
    >
      <div class="rscordTop">
        <!--<p>-->
        <!--  &lt;!&ndash;<span>&ndash;&gt;-->
        <!--  &lt;!&ndash;    <h1 class="level1" v-if="this.proInfo.level=='A'">{{proInfo.level}} 级</h1>&ndash;&gt;-->
        <!--  &lt;!&ndash;    <h1 class="level2" v-if="this.proInfo.level=='B'">{{proInfo.level}} 级</h1>&ndash;&gt;-->
        <!--  &lt;!&ndash;    <h1 class="level3" v-if="this.proInfo.level=='C'">{{proInfo.level}} 级</h1>&ndash;&gt;-->
        <!--  &lt;!&ndash;    <h1 class="level4" v-if="this.proInfo.level=='D'">{{proInfo.level}} 级</h1>&ndash;&gt;-->
        <!--  &lt;!&ndash;    <h3>{{proInfo.name}}</h3>&ndash;&gt;-->
        <!--  &lt;!&ndash;    <span>负责人：{{proInfo.leader1name}}</span>&ndash;&gt;-->
        <!--  &lt;!&ndash;</span>&ndash;&gt;-->
        <!--  &lt;!&ndash;<span>&ndash;&gt;-->
        <!--  &lt;!&ndash;    <span>{{proInfo.realStartDate}}至{{proInfo.planEndDate}}</span>&ndash;&gt;-->
        <!--  &lt;!&ndash;    <span>{{proInfo.prjStatus}}</span>&ndash;&gt;-->
        <!--  &lt;!&ndash;</span>&ndash;&gt;-->
        <!--</p>-->
        <div class="head">
          <h2 v-if="intention === 2" style="color: red">
            高 <span style="color: #333333">{{ title }}</span>
          </h2>
          <h2 v-if="intention === 1" style="color: #00b98d">
            一般 <span style="color: #333333">{{ title }}</span>
          </h2>
          <h2 v-if="intention === 0" style="color: #5e7382">
            低 <span style="color: #333333">{{ title }}</span>
          </h2>
          <span>创建于{{ timer.replace("T", "  ") }}</span>
          <span class="status">{{ status }}</span>
        </div>
        <!-- <el-input
          v-if="flag"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 10}"
          placeholder="请输入内容"
          v-model="value">
        </el-input> -->
        <pre>
          <el-input
            v-if="flag"
            style="width: 655px; margin-left: 12px"
            type="textarea"
            :autosize="{ minRows: 7, maxRows: 12}"
            placeholder="请输入内容"
            v-model="value">
          </el-input>
        </pre>
      </div>
      <span
        v-if="flag"
        style="display: block; margin-top: 10px; text-align: right"
      >
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddProjectList">确 定</el-button>
      </span>
      <el-timeline v-if="projectList.length > 0">
        <el-timeline-item
          v-for="(item, index) in projectList"
          :key="index"
          :timestamp="item.createTime.replace('T', ' ')"
          placement="top"
        >
          <!-- <el-card>
            <div style="overflow: hidden">
              <pre class="text-wrap">{{item.content}}</pre>
              <el-button v-if="flag" size="mini" style="float: right; margin-top: 8px;" @click="delRecord(item)" class="el-icon-delete" round></el-button>
            </div>
            <p>{{item.recordName}} 提交于 {{item.createTime.replace('T',' ')}}</p>
          </el-card> -->
          <el-card>
            <el-row class="content-box" type="flex" justify="space-between">
              <el-col :span="22">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="item.content"
                >
                </el-input>
              </el-col>
              <el-col :span="2">
                <el-button
                  size="mini"
                  @click="delRecord(item)"
                  class="closeBtn el-icon-delete"
                  round
                ></el-button>
              </el-col>
            </el-row>

            <!-- <h4>
              <pre class="text-wrap">{{item.content}}</pre>
            </h4> -->
            <p>
              {{ item.recordName }} 提交于
              {{ item.createTime.replace("T", " ") }}
            </p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <p v-else style="text-align: center">--暂无记录--</p>
      <!-- 分页 -->
      <el-pagination
        style="text-align: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleChangePage"
        :current-page="pn"
        :page-sizes="[5, 10, 15, 20, 30, 40]"
        :page-size="ps"
        layout="total, sizes, prev, pager, next, jumper"
        :total="size"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import TodoList from "./TodoList/index";
import { insertProjectRecord, deleteProjectRecord } from "@/service/Api";
import { mapGetters } from "vuex";

export default {
  name: "recordDialog",
  components: { TodoList },
  data() {
    return {
      centerDialogVisible: false,
      value: "",
      userInfo: null,
      recordList: [],
      title: "", //标题
      titleH1: "", //标题头一个字
      timer: "", //创建时间
      status: "", //销售状态
      pn: 1,
      ps: 5,
      intention: 1, //等级
      flag: true,
    };
  },
  computed: {
    ...mapGetters(["projectList", "size"]),
  },

  created() {},
  methods: {
    showDialog(row, id = null) {
      this.flag = id == "first" ? true : false;
      this.intention = row.intention;
      this.titleH1 = row.name.substr(0, 1);
      this.title = row.name;
      this.timer = row.createTime;
      this.status =
        row.saleStatus === 0 ? "跟踪" : row.saleStatus === 1 ? "暂停" : "关闭";
      this.userInfo = row;
      this.centerDialogVisible = true;
    },
    handleSizeChange(val) {
      this.ps = val;
      this.$store.dispatch("getProjectList", {
        id: this.userInfo.id,
        pn: this.pn,
        ps: val,
      });
    },
    handleChangePage(val) {
      this.$store.dispatch("getProjectList", {
        id: this.userInfo.id,
        pn: val,
        ps: this.ps,
      });
    },
    AddProjectList() {
      // let formDate = new FormData()
      // formDate.append('projectId', this.userInfo.id)
      // formDate.append("content", this.value)
      // formDate.append("type", '0')
      //
      const data = {
        projectId: this.userInfo.id,
        content: this.value,
        type: "0",
      };
      insertProjectRecord(data).then((response) => {
        if (response.code === 0) {
          this.$store.dispatch("getProjectList", {
            id: this.userInfo.id,
            pn: 1,
            ps: 5,
          });
          this.value = "";
        }
      });

      // fetch('/api/admin/project/insertProjectRecord', {
      //   method: 'post',
      //   headers: {
      //     'API-User-Token': sessionStorage.getItem('token'),
      //     'content-type': 'application/x-www-form-urlencoded '
      //   },
      //   body: formDate
      // })
      //   .then(response => response.json())
      //   .catch(error => console.error('Error:', error))
      //   .then(response => );
    },
    currentChange(val) {
      this.$store.dispatch("getProjectList", {
        id: this.userInfo.id,
        pn: val,
        ps: this.ps,
      });
    },
    changeProject() {
      this.$store.dispatch("getProjectList", {
        id: this.userInfo.id,
        pn: 1,
        ps: 5,
      });
    },
    delRecord(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          // deleteProjectRecord(row.id).then(res => {
          //   console.log(res);
          //   if (res.code == 0) {
          //     this.$message.success("删除成功！");
          //     this.recordOption();
          //   }else{
          //   this.$message.error(response.message)
          // }
          // });

          deleteProjectRecord(row.id).then((response) => {
            if (response.code === 0) {
              this.$store.dispatch("getProjectList", {
                id: this.userInfo.id,
                pn: this.pn,
                ps: this.ps,
              });
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.head {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

h2 > span {
  font-size: 18px;
}

.status {
  color: #00b98d;
}

.btns {
  padding: 10px 0;
  text-align: right;
}

.text-wrap {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
}
.content-box {
  margin-bottom: 15px;
}
.closeBtn {
  /* float: right; */
  margin-left: 10px;
}

pre {
  margin: 0;
  padding: 0;
}
h4 {
  margin-top: 0;
}
</style>
